<template>
	<!-- <u-calendar ref="calendar":listss="listss"></u-calendar> -->
	<view class="container">
		<view class="topFixed">
			<view class="topNav" :style="{ paddingTop: topTitBox + 'px' }">
				<view class="topNav-min">
					<view class="d-rn d-jb d-ac" style="width: 94%; margin: 0 auto">
						<view class="topNav-min-left">
							<text>{{ $t('hello') }}！{{ userInfo.employeeName }}</text>
						</view>
						<view class="topNav-min-right d-rn d-ac">
							<view class="topNav-min-right-picker">
								<picker @change="changeEmployer" :range="employerList" range-key="employerName" class="picker">
									<view class="d-rn d-ac">
										<view class="picker-con d-cn d-jc">
											<view class="uni-input one-txt-cut" v-if="employerIndex != null &&
				employerIndex != -1
				">
												{{
				employerList[employerIndex]
					.employerName
			}}
											</view>
											<view class="uni-input one-txt-cut" v-else>{{ $t('select') }}</view>
										</view>
										<image src="../../static/img/bottom.png" mode=""></image>
									</view>
								</picker>
							</view>
							<view class="topNav-min-right-lang">
								<!-- <image src="../../static/img/jian.png" mode=""></image> -->
								<!-- {{ locale == 0 ? '简' : locale == 1 ? '繁' : 'en' }} -->
								<picker @change="bindPickerChange" :value="locale" :range="list">
									<view class="uni-input">{{list[locale]}}</view>
								</picker>
							</view>
							<view class="topNav-min-right-set" @click.stop="handleShowSeeting">
								<image src="../../static/img/set.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="notice d-rn d-ac d-jb">
						<image src="../../static/img/notice.png" mode="" class="image1"></image>
						<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
							:vertical="true">
							<swiper-item v-for="(item, index) in messagesList" :key="index">
								<view class="swiper-item">
									<text>{{ item.content }}</text>
									<text>{{ item.createTime }}</text>
								</view>
							</swiper-item>
						</swiper>
						<!-- <image src="../../static/img/more.png" mode="" class="image2" @click="handleMore"></image> -->
						<view class="more" @click="handleMore">{{ $t('view_more') }}</view>

					</view>
					<view class="nav">
						<view class="nav-list d-rn d-ac">
							<view class="nav-list-one d-rw d-ac">
								<view class="nav-list-one-one d-cn d-ac d-jc" v-for="(item, index) in nacList" :key="index"
									@click="handleGoDetails(index)">
									<image :src="item.icon" mode=""></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="holiday" style="margin-top: 580rpx" v-if="holidayHideSts">
			<view class="holiday-title d-rn d-ac d-jb">
				<text>{{ $t('vacationRemaining') }}</text>
				<text class="d-rn d-ac d-jc" @click="handleHideHoliday">{{ $t('hide') }}</text>
			</view>
			<view class="holiday-table">
				<view class="holiday-table-head d-rn d-ac d-jb">
					<text class="d-rn d-ac d-jc">{{ $t('vacationName') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('due') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('taken') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('balance') }}</text>
				</view>
				<view class="holiday-table-info" :class="!holidayHeight ? 'height1' : 'height2'">
					<view class="holiday-table-info-one d-rn d-ac d-jb" v-for="(item, index) in holidayList" :key="index">
						<text class="d-rn d-ac d-jc">{{
				item.vacationName || '-'
			}}</text>
						<text class="d-rn d-ac d-jc">{{
					formatHolidayDays(item.vacationDuration + item.expireDuration + item.modifyDays) || 0
				}}</text>
						<text class="d-rn d-ac d-jc">{{
					formatHolidayDays(item.leaveDays) || 0
				}}</text>
						<text class="d-rn d-ac d-jc">{{
					formatHolidayDays(
						item.vacationDuration + item.expireDuration - item.expireDuration - item.leaveDays +
						item.modifyDays
					) || 0
				}}</text>
					</view>
				</view>
				<view class="holiday-table-bottom d-rn d-ac d-jb" @click="handleShowInfoAll">
					<text></text>
					<image src="../../static/img/bottom-qian.png" mode="" :class="!holidayHeight ? 'imgT1' : 'imgT2'">
					</image>
					<text></text>
				</view>
			</view>
		</view>

		<view class="order" v-if="orderHideSts" :class="[!holidayHideSts ? 'orderMar' : '']">
			<view class="order-title d-rn d-ac d-jb">
				<text>{{ $t('mySchedule') }}</text>
				<text class="d-rn d-ac d-jc" @click="handleOrderHideSts">{{ $t('hide') }}</text>
			</view>
			<view class="order-table" @click="handleGoDetails(2)">
				<view class="order-table-head d-rn d-ac d-jb">
					<text class="d-rn d-ac d-jc">{{ $t('monday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('tuesday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('wednesday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('thursday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('friday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('saturday') }}</text>
					<text class="d-rn d-ac d-jc">{{ $t('sunday') }}</text>
				</view>
				<view class="order-table-info d-rn d-jb">
					<view class="order-table-info-one" v-for="(item, index) in dateList" :key="index">
						<view class="order-table-info-one-date d-cn d-jc d-ac">
							<text class="d-rn d-ac d-jc">{{ item.day }}</text>
						</view>
						<view>
							<view class="d-cn d-ac d-jc" v-for="(items, indexs) in item.classesList" :key="indexs">
								<text class="span-1 one-txt-cut" :style="{ background: items.shiftColor }">{{
				items.shiftName }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="option" v-if="optionHideSts" :class="[!holidayHideSts && orderHideSts
				? ''
				: !holidayHideSts && !orderHideSts
					? 'orderMar'
					: ''
			]">
			<view class="option-title d-rn d-ac d-jb">
				<text>{{ $t('operationLog') }}</text>
				<text class="d-rn d-ac d-jc" @click="handleOptionHideSts">{{ $t('hide') }}</text>
			</view>
			<scroll-view class="option-table" style="height: 400px" scroll-y="true" @scrolltolower="scrolltolower">
				<view class="option-table-info" v-for="(item, index) in optionList" :key="index">
					<view class="option-table-info-one d-rn d-ac d-jb">
						<view class="option-table-info-one-left d-rn d-ac">
							<image src="../../static/img/rizhi.png" mode=""></image>
							<text class="one-txt-cut">{{ item.content }}</text>
						</view>
						<view class="option-table-info-one-right">
							<text>{{ item.createTime }}</text>
						</view>
					</view>
				</view>
				<!-- hasPage -->
				<u-loadmore v-if="!hasPage" status="nomore" dashed line />
			</scroll-view>
		</view>

		<view class="mark">
			<u-popup :show="showSeeting" mode="center" :round="10">
				<view class="tips">
					<view class="tips-title d-rn d-ac d-jb">
						<image src="" mode=""></image>
						<text>{{ $t('displaySettings') }}</text>
						<image src="../../static/img/close.png" mode="" @click="handleClose"></image>
					</view>
					<view class="tips-content d-cn d-ac d-jc">
						<view class="tips-content-one d-rn d-ac d-jc" v-for="(item, index) in seetingList" :key="index"
							@click="handleSelectShow(item, index)">
							<image :src="item.icon" mode=""></image>
							<text>{{ item.label }}</text>
							<image src="../../static/img/xuanzhong.png" mode="" class="texiao" v-if="item.showSts">
							</image>
						</view>
					</view>
					<view class="tips-option d-rn d-ac d-jc">
						<text class="d-rn d-ac d-jc" @click="handleCancel">{{ $t('cancel') }}</text>
						<text class="d-rn d-ac d-jc" @click="handleSure">{{ $t('confirm') }}</text>
					</view>
				</view>
			</u-popup>

		</view>
	</view>
	<!-- <view class="">
		<rilis></rilis>
	</view> -->
</template>

<script>
	import {
		logList,
		scheduleList,
		getOperationLog,
		getMySchedule,
		getMessage,
		getHolidayRemaining,
		reviewerType,
	} from '../../api/index.js';
	import {
		getEmploymentList,
		changeEmployer
	} from '@/api/mine.js';
	import rilis from '../../components/rili/index.vue';

	export default {
		components: {
			rilis,
		},
		data() {
			return {
				list: ['简','繁','en'],
				//list: [this.$t('simplified'), this.$t('traditional'), this.$t('english')],
				show: true,
				mode: 'range',
				phoneInfo: uni.getSystemInfoSync(),
				type: {
					typeName: '',
					typeId: '',
				},
				// userInfo: uni.getStorageSync("userInfo") || {},
				topTitBox: 0,
				nacList: [{
						icon: '../../static/img/data.png',
						name: this.$t('checkIn'),
					},
					{
						icon: '../../static/img/qingjia.png',
						name: this.$t('leave1'),
					},
					{
						icon: '../../static/img/paiban.png',
						name: this.$t('schedule'),
					},
					{
						icon: '../../static/img/jixiao.png',
						name: this.$t('performance'),
					},
					{
						icon: '../../static/img/zhifu.png',
						name: this.$t('paySlip'),
					},
					{
						icon: '../../static/img/shenhe.png',
						name: this.$t('review'),
					},
				],

				holidayList: [],
				holidayHeight: false,
				holidayHideSts: true,

				orderList: [],
				orderHideSts: true,

				optionList: [],
				optionHideSts: true,

				showSeeting: false,

				seetingList: [{
						icon: '../../static/img/jieyu.png',
						label: this.$t('showHolidayBalance'),
						showSts: true,
					},
					{
						icon: '../../static/img/rili.png',
						label: this.$t('showMySchedule'),
						showSts: true,
					},
					{
						icon: '../../static/img/gongzuo.png',
						label: this.$t('showOperationLog'),
						showSts: true,
					},
				],
				pageNum: 1,
				pageSize: 10,
				hasPage: false,
				total: 0,
				totalPage: 0,
				orderLists: [],
				userName: '',
				ysers: '',
				timeForm: {
					startTime: '',
					endTime: '',
				},
				dateTime: '',
				dateList: [],
				messagesList: [],
				employerIndex: null,
				employerList: [],
				roleName: uni.getStorageSync('roleName'),
				locale: uni.getStorageSync('locale'),
			};
		},
		onShow() {
			this.userName = uni.getStorageSync('empName');
			this.getEmploymentList();
			this.getData();
			this.getgetHolidayRemaining();
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			// this.$refs.calendar.setFormatter(this.formatter)
		},
		onLoad() {
			var today = new Date();
			var year = today.getFullYear();
			this.ysers = year;
			this.nowMonth = today.getMonth() + 1;
			if (this.nowMonth < 10) {
				this.nowMonth = '0' + this.nowMonth;
			}

			this.topTitBox = this.phoneInfo.statusBarHeight;
			this.getlogList();
			// this.getapplicationList()
			this.getscheduleList();
			// this.getgetHolidayRemaining();
		},
		watch: {
			holidayHideSts(newValue) {
				if (newValue) {
					this.seetingList[0].showSts = true;
				} else {
					this.seetingList[0].showSts = false;
				}
			},
			orderHideSts(newValue) {
				if (newValue) {
					this.seetingList[1].showSts = true;
				} else {
					this.seetingList[1].showSts = false;
				}
			},
			optionHideSts(newValue) {
				if (newValue) {
					this.seetingList[2].showSts = true;
				} else {
					this.seetingList[2].showSts = false;
				}
			},
			// if(){
			// 	this.seetingList[0].showSts = true
			// }
			// if(this.orderHideSts){
			// 	this.seetingList[1].showSts = true
			// }
			// if(this.optionHideSts){
			// 	this.seetingList[1].showSts = true
			// }
		},
		methods: {
			bindPickerChange(e) {
				console.log('e', e)
				this.locale = e.detail.value;

				let lang = '';
				if (this.locale == 0) {
					lang = 'zh-Hans'
				} else if (this.locale == 1) {
					lang = 'zh-Hant'
				} else if (this.locale == 2) {
					lang = 'en'
				}
				if (lang) {
					uni.setLocale(lang)
					uni.setStorageSync('locale', this.locale)
					this.$i18n.locale = lang;
					// 更新nacList多语言
					this.nacList = [{
							icon: '../../static/img/data.png',
							name: this.$t('checkIn'),
						},
						{
							icon: '../../static/img/qingjia.png',
							name: this.$t('leave1'),
						},
						{
							icon: '../../static/img/paiban.png',
							name: this.$t('schedule'),
						},
						{
							icon: '../../static/img/jixiao.png',
							name: this.$t('performance'),
						},
						{
							icon: '../../static/img/zhifu.png',
							name: this.$t('paySlip'),
						},
						{
							icon: '../../static/img/shenhe.png',
							name: this.$t('review'),
						},
					],
					this.$forceUpdate();
				}
			},
			formatHolidayDays(days) {
				// 判断是否为整数
				if (Number.isInteger(days)) {
					// 如果是整数，直接返回整数部分
					return days.toString();
				} else {
					// 如果是小数，保留六位小数
					return days.toFixed(2);
				}
			},
			//获取雇佣列表
			getEmploymentList() {
				getEmploymentList().then((res) => {
					this.employerList = res.data;
					this.employerIndex = this.employerList.findIndex((item) => {
						return item.selected == true;
					});
					uni.setStorageSync(
						'curEmployerId',
						this.employerList[this.employerIndex].id
					);
				});
			},
			//切换雇主信息
			changeEmployer(e) {
				this.employerIndex = e.detail.value;
				const employer = this.employerList[this.employerIndex];
				// this.$store.commit('SET_EMPLOYER', {
				// 	employerId: employer.id,
				// 	employerName: employer.employerName
				// })
				changeEmployer(employer.id).then((res) => {
					this.getData();
				});
			},
			getData() {
				this.getgetMessage();
			},

			getgetHolidayRemaining() {
				let data = {
					employeeId: this.userInfo.id,
					employerId: uni.getStorageSync('curEmployerId'),
				};
				getHolidayRemaining(data).then((res) => {
					if (res.code == 200) {
						this.holidayList = res.data.records;
						console.log('	this.holidayList', this.holidayList);
						if (this.holidayList && this.holidayList.length) {
							this.holidayList.forEach((e) => {
								e.remaindeLeaveDays =
									e.totalVacationDuration -
									e.leaveDays +
									e.modifyDays;
							});
						}
					}
				});
			},

			getgetMessage() {
				getMessage().then((res) => {
					if (res.code == 200) {
						this.messagesList = res.data.records;
					}
				});
			},
			// getapplicationList() {
			// 	applicationList({
			// 		pageNum: this.pageNum,
			// 		pageSize: this.pageSize,
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			this.holidayList = res.rows;
			// 			this.total = res.total;
			// 			this.holidayList.map(item => {
			// 				item.officeHours = item.officeHours.substring(10, 16)
			// 			})
			// 		}
			// 	})
			// },

			getscheduleList() {
				this.dateTime = this.$commonFun.timesWeeks();
				this.timeForm.startTime = this.dateTime[0];
				this.timeForm.endTime = this.dateTime[this.dateTime.length - 1];
				getMySchedule(this.timeForm).then((res) => {
					this.dateList = res.data;
					this.dateList.forEach((item) => {
						item.day = item.date.substring(8, 10);
					});
				});
				this.$forceUpdate();
			},
			handleMore() {
				this.$commonFun.goUrl(1, '../message/index');
			},
			handleGoDetails(index) {
				if (!index) {
					this.$commonFun.goUrl(2, '../clockIn/index');
				} else if (index == 1) {
					this.$commonFun.goUrl(1, '../holidayApply/index');
				} else if (index == 2) {
					this.$commonFun.goUrl(2, '../shift/index');
				} else if (index == 3) {
					this.$commonFun.goUrl(1, '../performance/index');
				} else if (index == 4) {
					this.$commonFun.goUrl(1, '../salary/index');
				} else if (index == 5) {
					this.$commonFun.goUrl(1, '../approve/index');
				}
			},
			handleSelectShow(item, index) {
				item.showSts = !item.showSts;
				if (item.showSts && item.label == this.$t('showHolidayBalance')) {
					this.holidayHideSts = true;
				} else if (item.showSts && item.label == this.$t('showMySchedule')) {
					this.orderHideSts = true;
				} else if (item.showSts && item.label == this.$t('showOperationLog')) {
					this.optionHideSts = true;
				}
				if (!item.showSts && item.label == this.$t('showHolidayBalance')) {
					this.holidayHideSts = false;
				} else if (!item.showSts && item.label == this.$t('showMySchedule')) {
					this.orderHideSts = false;
				} else if (!item.showSts && item.label == this.$t('showOperationLog')) {
					this.optionHideSts = false;
				}
				this.$forceUpdate();
			},
			handleSure() {
				this.showSeeting = false;
			},
			handleCancel() {
				this.showSeeting = false;
			},
			handleClose() {
				this.showSeeting = false;
			},
			handleShowSeeting() {
				this.showSeeting = true;
			},
			handleOptionHideSts() {
				this.optionHideSts = false;
			},
			handleOrderHideSts() {
				this.orderHideSts = false;
			},
			handleHideHoliday() {
				this.holidayHideSts = false;
			},
			handleShowInfoAll() {
				this.holidayHeight = !this.holidayHeight;
			},
			confirm(e) {
				console.log(e);
			},
			formatter(day) {
				// const d = new Date()
				// console.log('d==',d.getMonth());
				// let month = d.getMonth() + 1
				// const date = d.getDate()
				// if(day.month == month && day.day == date + 3)
				// {
				// 	day.bottomInfo = '有优惠'
				// 	day.dot = true
				// }
				// return day
			},
			scrolltolower() {
				this.pageSize += 10;
				this.getlogList();
			},
			getlogList() {
				getOperationLog({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then((res) => {
					if (res.code == 200) {
						this.total = res.total;
						this.optionList = res.data.records;
						if (this.totalPage < this.total) {
							this.hasPage = true;
						} else {
							this.hasPage = false;
						}
					}
				});
			},
		},
		onReachBottom() {
			if (this.hasPage) {
				this.hasPage = false;
				this.pageNum++;
				this.getlogList();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.more {
		background-color: #fed72e;
		border-radius: 16px;
		padding: 2px 10px;
		white-space: nowrap;
		font-size: 14px;
	}

	.topNav-min-right-lang {
		background-color: #ffe182;
		border-radius: 50%;
		padding: 2px 4px;
		font-size: 14px;
	}

	page {
		background-color: #f5f5f5;
	}

	.container {
		width: 100%;

		.orderMar {
			margin-top: 580rpx !important;
		}

		.height1 {
			height: 180rpx;
		}

		.height2 {
			height: 100%;
		}

		.imgT2 {
			transform: rotate(180deg);
		}

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			top: 0;
			left: 0;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			background: url('../../static/img/indexBack.png') no-repeat;
			height: 431rpx;
			background-size: 100% 100%;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;

				&-left {
					text {
						font-size: 36rpx;
						font-weight: 500;
						color: #17171a;
					}
				}

				&-right {
					&-picker {
						width: 186rpx;
						padding: 8rpx 24rpx;
						box-sizing: border-box;
						background-color: #ffe182;
						border-radius: 2em;

						.picker-con {
							.uni-input {
								max-width: 112rpx;
								font-size: 28rpx;
								color: #17171a;
							}
						}

						image {
							width: 18rpx;
							height: 10rpx;
							margin-left: 12rpx;
						}
					}

					&-lang {
						margin: 0 15rpx;

						image {
							width: 57rpx;
							height: 57rpx;
						}
					}

					&-set {
						image {
							width: 57rpx;
							height: 57rpx;
						}
					}
				}

				.notice {
					width: 94%;
					height: 80rpx;
					background-color: #ffeebd;
					padding: 0 24rpx;
					box-sizing: border-box;
					margin: 24rpx auto 0;
					border-radius: 12rpx;

					.image1 {
						width: 36rpx;
						height: 36rpx;
						margin-right: 24rpx;
						min-width: 36rpx;
						min-height: 36rpx;
					}

					.image2 {
						width: 136rpx;
						height: 52rpx;
						margin-left: 24rpx;
						min-width: 136rpx;
						min-height: 52rpx;
					}

					swiper {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;

						.swiper-item {
							text:nth-of-type(1) {
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
							}

							text:nth-of-type(2) {
								font-size: 24rpx;
								color: #9a8f74;
								margin-left: 24rpx;
							}
						}
					}
				}

				.nav {
					width: 94%;
					background-color: #ffffff;
					box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
					border-radius: 12rpx;
					padding: 30rpx 46rpx 0;
					box-sizing: border-box;
					position: absolute;
					top: 115%;
					left: 3%;

					&-list {
						width: 100%;

						&-one {
							&-one {
								width: 150rpx;
								margin-bottom: 30rpx;

								image {
									width: 88rpx;
									height: 88rpx;
								}

								text {
									font-size: 26rpx;
									color: #333333;
									margin-top: 12rpx;
								}
							}
						}
					}
				}
			}
		}

		.holiday {
			width: 94%;
			margin: 0 auto;
			background-color: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			margin-bottom: 24rpx;

			&-title {
				margin-bottom: 25rpx;

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}

				text:nth-of-type(2) {
					width: 90rpx;
					height: 42rpx;
					border-radius: 2em;
					background-color: #f4f5f7;
					font-size: 24rpx;
					color: #999990;
				}
			}

			&-table {
				width: 100%;

				&-head {
					background-color: #f4f5f7;
					padding: 16rpx 42rpx;
					box-sizing: border-box;

					text {
						font-size: 24rpx;
						color: #666666;
					}

					text:nth-of-type(1) {
						width: 130rpx;
					}

					text:nth-of-type(2) {
						width: 60rpx;
						font-size: 24rpx;
					}

					text:nth-of-type(3) {
						width: 60rpx;
						font-size: 24rpx;
					}

					text:nth-of-type(4) {
						width: 60rpx;
						font-size: 24rpx;
					}
				}

				&-info {
					padding: 16rpx 42rpx;
					box-sizing: border-box;
					overflow: hidden;

					&-one {
						margin-bottom: 32rpx;

						text {
							font-size: 24rpx;
							color: #666666;
						}

						text:nth-of-type(1) {
							width: 130rpx;
							font-size: 24rpx;
						}

						text:nth-of-type(2) {
							width: 60rpx;
							font-size: 24rpx;
							color: #fa3737;
						}

						text:nth-of-type(3) {
							width: 60rpx;
							font-size: 24rpx;
							color: #22bb7e;
						}

						text:nth-of-type(4) {
							width: 60rpx;
							font-size: 24rpx;
						}
					}
				}

				&-bottom {
					text {
						width: 280rpx;
						height: 1rpx;
						background-color: #eeeeee;
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.order {
			width: 94%;
			margin: 0 auto;
			background-color: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;
			margin-bottom: 24rpx;

			.span-1 {
				max-width: 52rpx;
				font-size: 22rpx;
				color: #ffffff;
				margin-bottom: 10rpx;
			}

			&-title {
				margin-bottom: 25rpx;

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}

				text:nth-of-type(2) {
					width: 90rpx;
					height: 42rpx;
					border-radius: 2em;
					background-color: #f4f5f7;
					font-size: 24rpx;
					color: #999990;
				}
			}

			&-table {
				background-color: #f4f5f7;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				&-head {
					text {
						font-size: 26rpx;
						color: #999999;
						width: 64rpx;
					}
				}

				&-info {
					margin-top: 20rpx;

					&-one {
						&-date {
							text {
								width: 64rpx;
							}

							text:nth-of-type(1) {
								font-size: 26rpx;
								color: #333333;
								margin-bottom: 4rpx;
							}

							.zao {
								width: 56rpx;
								height: 32rpx;
								background-color: #fdb911;
								font-size: 20rpx;
								border-radius: 4rpx;
								color: #ffffff;
								margin-bottom: 4rpx;
							}

							.wan {
								width: 56rpx;
								height: 32rpx;
								background-color: #4287ff;
								font-size: 20rpx;
								border-radius: 4rpx;
								color: #ffffff;
								margin-bottom: 4rpx;
							}

							.bai {
								width: 56rpx;
								height: 32rpx;
								background-color: #63d5bf;
								font-size: 20rpx;
								border-radius: 4rpx;
								color: #ffffff;
								margin-bottom: 4rpx;
							}
						}
					}
				}
			}
		}

		.option {
			width: 94%;
			margin: 0 auto;
			background-color: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, 0.1);
			border-radius: 12rpx;

			&-table {
				&-info-one-right {
					text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFangSC-Regular;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			&-title {
				margin-bottom: 25rpx;

				text:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}

				text:nth-of-type(2) {
					width: 90rpx;
					height: 42rpx;
					border-radius: 2em;
					background-color: #f4f5f7;
					font-size: 24rpx;
					color: #999990;
				}
			}

			&-table {
				&-info {
					&-one {
						margin-bottom: 56rpx;

						&-left {
							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 20rpx;
							}

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
								max-width: 360rpx;
							}
						}
					}
				}
			}
		}

		.mark {
			.tips {
				padding: 24rpx;
				box-sizing: border-box;
				width: 646rpx;

				&-title {
					padding-bottom: 30rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #e5e5e5;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				&-content {
					margin-top: 30rpx;
					padding-bottom: 30rpx;
					border-bottom: 1px solid #e5e5e5;

					&-one {
						width: 70%;
						border-radius: 2em;
						border: 1px solid #ffd92a;
						padding: 18rpx 0;
						box-sizing: border-box;
						margin-bottom: 16rpx;
						position: relative;

						image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}

						.texiao {
							position: absolute;
							top: 55%;
							left: 92%;
						}
					}

					.active {
						background-color: #fef9e7;
					}
				}

				&-option {
					margin: 24rpx 0 0 0;
					box-sizing: border-box;

					text {
						width: 225rpx;
						height: 78rpx;
						border: 1px solid #fed227;
						border-radius: 2em;
					}

					text:nth-of-type(2) {
						margin-left: 24rpx;
						background-color: #fed227;
					}
				}
			}
		}
	}
</style>